<template>
	<div class="login" v-loading="loading">
		<div class="login-view-top">
			<div class="set-pointer login-view-top-logo" @click="$router.push(`/agshop`)">
				<img class="logo" src="../../../assets/shoping-logo.png" width="300" />
				<!--<span class="login-view-top-logo-subtitle set-pointer">防疫情 · 保供应 · 促销费</span>-->
			</div>
			<p class="logo-title">欢迎您登录系统！</p>
		</div>
		<div class="login-wrap">
			<div class="login-view" :style="{height:maxHeightNow} ">
				<div class="login-view-left">
					<img src="../../../assets/login-logo.png" alt width="648" height="541" />
				</div>
				<div class="login-view-right">
					<h2 class="login-view-right-title">欢迎您</h2>
					<div>
						<el-form :model="userForm" :rules="rules" ref="userForm" :inline="true" class="form-box">
							<el-form-item prop="username" class="form-box-block">
								<el-input placeholder="用户名" v-model.trim="userForm.username">
									<i slot="prefix" class="font-color iconfont iconyonghu"></i>
								</el-input>
							</el-form-item>
							<el-form-item prop="password" class="form-box-block">
								<el-input placeholder="密码" type="password" v-model.trim="userForm.password"
									@keyup.enter.native="enterEvent">
									<i slot="prefix" class=" iconfont iconmima1"></i>
								</el-input>
							</el-form-item>
							<!-- <div class="verify-code">
                <el-form-item prop="verifyCode">
                  <el-input placeholder="验证码" v-model.trim="userForm.verifyCode" @keyup.enter.native="enterEvent">
                    <i slot="prefix" class="font-color iconfont iconyanzhengma"></i>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <img :src="verifyCodeSrc" alt="点击切换" width="70px" @click="getVerificationCode" />
                </el-form-item>
              </div> -->

							<!-- <SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun" style="margin-bottom: 10px;"></SliderCheck> -->


							<el-form-item class="form-box-block">
								<el-button type="primary" @click="submitForm('userForm')">登录</el-button>
							</el-form-item>
							<!-- <el-form-item class="form-box-block">
								<el-button type="primary" @click="submitForm2('userForm')">免登</el-button>
							</el-form-item> -->
							<!-- <el-form-item class="form-box-block">
								<el-button type="text" @click="$router.push('/register')">
									立即注册
									<i class="el-icon-arrow-right"></i>
								</el-button>
							</el-form-item> -->
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<reg-footer></reg-footer>
	</div>
</template>

<script>
	import regFooter from './components/com-footer'
	import {
		mapActions
	} from 'vuex'
	import {
		createUuid,
		getPath
	} from '@/util/common'
	import {
		getVerification
	} from '@/api/common.api'
	import {
		oauths
	} from '@/api/admin.api'
	import SliderCheck from './components/SliderCheck'
	import {
		Base64
	} from 'js-base64'

	import AES from "@/tools/aes";
	import md5 from 'js-md5'

	export default {
		name: 'login',
		data() {
			return {
				verifyCodeSrc: '',
				verificationCode: '',
				loading: false,
				userForm: {
					username: '',
					password: ''
					// verifyCode: '',
				},
				isLeft: false,
				isRight: false,
				rules: {
					username: [{
						required: true,
						message: '请填写用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请填写密码',
						trigger: 'blur'
					}]
					// verifyCode: [
					//   { required: true, message: '请填写验证码', trigger: 'blur' }
					// ],
				},
				Uuid: ''
			}
		},
		components: {
			regFooter,
			SliderCheck
		},
		computed: {
			// 登录区最大高度
			maxHeightNow() {
				const height = window.innerHeight
				if (height >= 1080) {
					return `${1080 - 226}px`
				} else if (height < 1080 && height >= 768) {
					return `${height -  226}px`
				} else {
					return '562px'
				}
			}
		},
		mounted(t) {
			// var userName = this.$route.query.userName;
			// var passWord = this.$route.query.passWord;
			// this.userForm.username = userName;
			// this.userForm.password = passWord;
			// 获取验证码
			// this.getVerificationCode()
			// this.submitForm('userForm');
		},

		methods: {

			// 滑块验证成功回调
			handleSuccessFun() {
				console.log('成功')
			},
			// 滑块验证失败回调
			handleErrorFun() {
				console.log('失败')
			},

			...mapActions(['handleLogin', 'handleGetRole']),
			/**
			 * @description 获取验证码
			 * @author 穆宏宇
			 * @date 2020-09-18 15:46:36
			 * @param
			 * @return
			 * */
			getVerificationCode() {
				this.Uuid = createUuid()
				getVerification(this.Uuid).then((response) => {
					// const src = 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
					this.verifyCodeSrc = 'data:image/png;base64,' + response
				})
			},
			// 提交
			submitForm(formName) {
				// var x = Base64.encode("Ajijasijdi")
				// var y = Base64.decode(x);

				// 判断密码是否符合要求 大小写数字特殊字符8位以上
				if (/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,64}$/.test(this.userForm.password)) {
					localStorage.setItem("needUpdatePwd", 0);
				} else {
					localStorage.setItem("needUpdatePwd", 1);
				}

				var key = "aOdkcJIlApsOsidK";
				var uname = AES.encrypt(this.userForm.username, key);
				var pwd = AES.encrypt(this.userForm.password, key);
				var server = localStorage.getItem("server");
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// todo md5
						oauths({
							name: uname,
							password: pwd
						}).then((res) => {
							if (res.code != 500) {
								// localStorage.clear()
								var token = res.token;
								localStorage.setItem("account", this.userForm.username);
								localStorage.setItem("qiantai", token);
								localStorage.setItem("client_code", res.client_code);
								localStorage.setItem("orgIds", res.orgIds);
								this.handleLogin(Object.assign(this.userForm, {
										Uuid: this.Uuid
									}))
									.then((res) => {
										this.$message({
											message: "登录成功！",
											type: "success"
										})
										this.$router.push({
											path: '/'
										})
									})
									.catch((err) => {
										this.$router.push({
											path: '/'
										})
									})

							} else {

								this.$message({
									message: res.msg,
									type: "error"
								})
							}

						})

					}
				})
			},

			submitForm2(formName) {

				this.$refs[formName].validate((valid) => {
					if (valid) {
						// todo md5
						this.handleLogin(Object.assign(this.userForm, {
								Uuid: this.Uuid
							}))
							.then((res) => {
								this.$message({
									message: res || '登录成功！',
									type: 'success'
								})
								// const path = getPath()
								this.$router.push({
									path: '/'
								})
							})
							.catch((err) => {
								// this.$message({
								//   message: err.msg || "登录失败！",
								//   type: "error",
								// });
								// this.getVerificationCode();
							})
					}
				})
			},

			enterEvent() {
				// if (this.userForm.verifyCode && this.userForm.verifyCode.length > 3) {
				// 	this.submitForm('userForm')
				// }
				this.submitForm('userForm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	$centreW: 1200px;
	$loginW: 300px;

	.leftView {
		width: 450px;
		float: left;
		height: 550px;
		margin-top: 90px;
		margin-left: 90px;

		.title {
			font-family: 'STXingkai';
			font-size: 55px;
			color: #fff;
			margin-top: 20px;
		}

		.iconView {
			width: 100%;
			overflow: hidden;

			.item {
				float: left;
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: #fff;
				border-radius: 50px;
				border: 2px solid #fff;
				margin: 12px;
			}
		}

		.erweima {
			width: 100%;
			overflow: hidden;
			padding-top: 100px;

			.item {
				float: left;
				margin: 0 15px;

				img {
					width: 90px;
					margin: 0 auto;
					display: block;
				}

				p {
					text-align: center;
					color: #fff;
					margin: 10px auto;
				}
			}

			.item:first-child {
				margin-left: 25px;
			}
		}
	}

	.login {
		min-width: $centreW;
		max-width: 1920px;
		max-height: 1080px;
		min-height: 768px;
		margin: 0 auto;

		&-wrap {
			background: url("~@/assets/login-wrap-bg.png") no-repeat center center;
			-webkit-background-size: cover;
			background-size: cover;

			.el-button {
				width: 100%;
			}
		}

		.login-view {
			width: $centreW;
			margin: 0 auto;
			/*height: calc(1080px - 226px);*/
			/*min-height: 562px;*/
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			&-top {
				width: $centreW;
				margin: 40px auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				&-logo {
					position: relative;

					/*width: 52%;*/
					&-subtitle {
						position: absolute;
						padding-left: 10px;
						color: #294783;
						font-weight: bold;
						font-size: 24px;
						bottom: 13px;
					}
				}

				.logo-title {
					font-size: 20px;
				}
			}

			&-right {
				border: 1px solid white;
				border-radius: 5px;
				background: white;
				padding: 40px;

				&-title {
					color: $--color-primary;
					margin-bottom: 20px;
				}
			}

			.el-form-item {
				margin-right: 4px;
			}
		}
	}

	.form-box {
		width: $loginW;

		&-block {
			.el-input {
				width: $loginW;
			}

			.el-button {
				width: $loginW;
			}
		}
	}

	.verify-code {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>